<template>
    <div class="skinditem-root">
        <div class="fixed">
        <Navbar>商品详情</Navbar>
        </div>
        <div id="text">
        <Swiper
            :list = "skindItem.img"
            auto
            loop
            dots-position = "center"
            height="250px"
        ></Swiper>
        <div class="info-main">
            <div class="goods-desc">
                <span class="goodsnameup">【{{skindItem.brandname}}】</span>
                <span class="goodsnamedown">{{skindItem.goodsname}}</span>
            </div>
            <div class="price">
                <span class="fa fa-rmb">{{skindItem.newprice}}</span>
                <span>活动中</span>
            </div>
            <div class="small-info">
                <p class="yuanjia">
                    <span style="text-decoration:line-through">{{skindItem.oldprice}}</span>
                </p>
                <p class="kuaidi">
                    <span>快递: 0.00</span>
                    <span>月销{{skindItem.num}}笔</span>
                    <span>河南郑州</span>
                </p>
            </div>

        </div>
        <div class="you-box">
            <div>
                <div>
                    <span class="dianyou">店铺</span><span class="dianyou quan">优惠券</span>
                    <span style="font-size:12px">领取优惠券</span>
                </div>
                <span class="fa fa-chevron-right jinru"></span>
            </div>
            <div>
                <div>
                    <p><span class="cuxiao">促销</span></p>
                    <p>
                        <span class="cuxiao">积分</span>
                        <span style="font-size:12px"> 购买可得1积分</span>
                    </p>
                </div>
                <span class="fa fa-chevron-right jinru secondjinru"></span>
            </div>
            <div>
                <span>
                    <span class="fa fa-check-circle-o promise sred"></span><span class="promise"> 极速退货</span>
                </span>
                <span>
                    <span class="fa fa-check-circle-o promise sred"></span><span class="promise"> 正品保证</span>
                </span>
                <span>
                    <span class="fa fa-check-circle-o promise sred"></span><span class="promise"> 七天退换</span>
                </span>
                <span class="fa fa-chevron-right jinru"></span>
            </div>
        </div>
        <div class="choose-box">
            <div @click="showCarClick">
                <span>选择颜色分类</span>
                <span class="fa fa-chevron-right jinru"></span>
            </div>
            <div>
                <span>产品参数</span>
                <span class="fa fa-chevron-right jinru"></span>
            </div>
        </div>
        <div class="goods-tabbar">
            <div>
                <div class="clumn">
                    <span class="fa fa-shopping-basket" style="font-size:16px"></span>
                    <p>店铺</p>
                </div>
                <div class="clumn">
                    <span class="fa fa-commenting-o" style="font-size:16px"></span>
                    <p>客服</p>
                </div>
                <div class="clumn">
                    <span class="fa fa-star-o" style="font-size:16px"></span>
                    <p>收藏</p>
                </div>
            </div>
            <div @click="showCarClick">加入购物车</div>
            <div>立即购买</div>
        </div>
        </div>
        <transition name="aniMask">
            <div 
                v-show="showCar" 
                class="car-mask" 
                @click="hideShowCar"
            >
            </div>
        </transition>
        
        <transition name="aniEdit">
            <Goodsreg v-if="showCar"></Goodsreg>
        </transition>

    </div>
</template>

<script>
import Navbar from "../components/Navbar.vue"
import Goodsreg from '../components/Goodsreg.vue';
import {mapState} from 'vuex';
import {Swiper} from 'vux';
export default {
    mounted:function(){
        var params = {
            _id:this.$route.query._id
        }
        this.$store.dispatch("requestSkindItem",params)
        .then(res=>{
            this.$store.commit("setSkindItem",res.data.data);
        });
    },
    methods:{
        back:function(){
            history.back();
        },
        showCarClick:function(){
            this.$store.commit("setShowCar",true);
        },
        hideShowCar:function(){
            this.$store.commit("setShowCar",false);
        }
    },
    computed:{
        ...mapState([
            "isrequest",
            "skindItem",
            "showCar"
        ])
    },
    components:{
        Swiper,
        Goodsreg,
        Navbar
    }
}
</script>

<style scoped>
.fixed{
    position:fixed;
    top:0;
    left:0;
    z-index:200;
    background-color: #eeeeee;
    width:100%;
   
}
#text{
    margin-top:50px;
}
    .skinditem-root{
        width: 100vw;
        height: calc(100vh - 45px);
        background-color: #fefefe;
        overflow-y: scroll;
        z-index: 100;
       
    }
    .info-main{
        padding: 5px 10px;
        width: 100%;
    }
    .goods-desc{
        width: 100%;
    }
    .goodsnameup{
        font-size: 16px;
        font-weight: bold;
    }
    .goodsnamedown{
        font-size: 14px;
    }

    .price{
        padding-top: 5px;
    }
    .price>span{
        color: #ee0000;
    }
    .price>span:nth-of-type(1){
        font-size: 17px;
    }
    .price>span:nth-of-type(2){
        font-size: 25px;
    }
    .price>span:nth-of-type(3){
        margin-left: 2vw;
        font-size: 10px;
        padding: 0 2px;
        border: 1px solid #ee0000;
        border-radius: 2px;
        text-align: center;
        position: relative;
        top: -3px;
    }
    .small-info{
        color: #666;
        font-size: 12px;
    }
    .yuanjia>span:nth-of-type(2){
        text-decoration: line-through;
    }
    .kuaidi{
        margin-top: 5vw;
        display: flex;
        justify-content: space-between;
    }
    .you-box{
        width: 100vw;
        background-color: rgba(240, 240, 240, 0.5);
    }
    .you-box>div{
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }
    .you-box>div:nth-last-of-type(1){
        border-bottom: none;
    }
    .dianyou{
        padding: 0 1px;
        border: 1px solid orangered;
        border-right: 1px dashed orangered;
        color: orangered;
        font-size: 10px;
        position: relative;
        top: -1px;
        /*font-family: "宋体";*/
    }
    .quan{
        padding: 0 2px;
        border-left:none;
        border-right: 1px solid orangered;
    }
    .jinru{
        color: #999;
        position: relative;
        top: 5px;
    }
    .promise{
        position: relative;
        /*top:5px;*/
        font-size: 14px;
        color: #666;
    }
    .sred{
        color: #ee0000;
    }
    .cuxiao{
        background-color: #fefefe;
        font-size: 10px;
        font-family: "宋体";
        color: orangered;
    }
    .secondjinru{
        position: relative;
        top: 5px;
        line-height: 40px;
    }
    .choose-box{
        margin: 5px 0;
        background-color: white;
    }
    .choose-box>div{
        display: flex;
        justify-content: space-between;
        padding: 10px;
        font-size: 14px;
    }
    .choose-box>div:nth-of-type(1){
        border-bottom: 1px solid #ddd;
    }
    .goods-tabbar{
        border-top: 1px solid #ddd;
        position: fixed;
        background-color: white;
        width: 100vw;
        height: 45px;
        bottom: 0;
        left:0;
        display: flex;
    }
    .goods-tabbar>div{
        width: 30%;
        color: white;
    }
    .goods-tabbar>div:nth-of-type(1){
        width: 40%;
        display: flex;
        color: #333;
        font-size: 12px;
    }
    .goods-tabbar>div:nth-of-type(2){
        text-align: center;
        background-color: orange;
        line-height: 45px;
    }
    .goods-tabbar>div:nth-of-type(3){
        text-align: center;
        background-color: orangered;
        line-height: 45px;
    }
    .clumn{
        text-align: center;
        width: 33.33%;
        padding-top: 6px;
    }
    /*蒙灰层*/
    .car-mask{
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }
    /*蒙灰层动画*/
    .aniMask-enter,.aniMask-leave-to{
        opacity: 0;
    }
    .aniMask-enter-active,.aniMask-leave-active{
        transition: all 0.7s;
    }
    .aniMask-enter-to,aniMask-leave{
        opacity: 1;
    }
    /*编辑层动画*/
    .aniEdit-enter,.aniEdit-leave-to{
        opacity: 0 ;
        height: 0 !important;
    }
    .aniEdit-enter-active,.aniEdit-leave-active{
        transition: all 0.7s;
    }
    .aniEdit-enter-to{
        opacity: 1;
        height: 65vh !important;
    }
</style>